<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1, maximin=1, user-scalable=no" />
	<title>h5-2</title>
	<link rel="stylesheet" href="./css/style.css" />
	<script>
		// 音频加载
		window.onload = function () {
			var audio = document.getElementById('bgmusic');
			audioAutoPlay();
	        function audioAutoPlay(){
	        	audio.play();
	        	document.addEventListener("WeixinJSBridgeReady", function () {
	        		audio.play();
	      		}, false);
	        }
    	};
	</script>
</head>
<body>
<audio id="bgmusic" src="./music.mp3" preload loop="loop"></audio>
<canvas></canvas>
<img src="./image/page_8/2d_mark.png" />
<a href="javascript:void(0);" role="button">参与活动</a>
<script src="./script/jquery.min.js"></script>
<script src="./script/jquery.preload.js"></script>
<script>
$(function () {
	// 兼容处理
	var requestAnimationFrame = 
		window.requestAnimationFrame || 										
		window.webkitRequestAnimationFrame || 
		window.msRequestAnimationFrame || 
		window.mozRequestAnimationFrame;
	var cancelAnimationFrame = 
		window.cancelAnimationFrame || 										
		window.webkitCancelAnimationFrame || 
		window.msCancelAnimationFrame || 
		window.mozCancelAnimationFrame;

	$.preload([
		// 提示箭头
		'./image/arrow.png',
		// 第一幕需要的图
		'./image/page_1/page_bg1.jpg',
		'./image/page_1/bg_wave1.jpg',
		'./image/page_1/bg_wave2.jpg',
		'./image/page_1/bg_wave3.jpg',
		'./image/page_1/bg_wave4.jpg',
		'./image/page_1/bg_wave5.jpg',
		'./image/page_1/bird_status1.png',
		'./image/page_1/bird_status2.png',
		'./image/page_1/bird_status3.png',
		'./image/page_1/text1.png',
		'./image/page_1/text2.png',
		// 第二幕需要的图
		'./image/page_2/page_bg2.jpg',
		'./image/page_2/pop_status1.png',
		'./image/page_2/pop_status2.png',
		'./image/page_2/pop_status3.png',
		'./image/page_2/fish_status1.png',
		'./image/page_2/fish_status2.png',
		'./image/page_2/fish_status3.png',
		'./image/page_2/text1.png',
		'./image/page_2/text2.png',
		'./image/page_2/text3.png',
		'./image/page_2/person1.png',
		'./image/page_2/person2.png',
		'./image/page_2/person3.png',
		// 第三幕需要的图
		'./image/page_3/page_bg3.jpg',
		'./image/page_3/fishing.png',
		'./image/page_3/text1.png',
		'./image/page_3/text2.png',
		'./image/page_3/text3.png',
		'./image/page_3/popstatus1.png',
		'./image/page_3/popstatus2.png',
		'./image/page_3/popstatus3.png',
		'./image/page_3/fish1_status1.png',
		'./image/page_3/fish1_status2.png',
		'./image/page_3/fish1_status3.png',
		'./image/page_3/fish2_status1.png',
		'./image/page_3/fish2_status2.png',
		'./image/page_3/fish2_status3.png',
		// 第四幕需要的图
		'./image/page_4/page_bg4.jpg',
		'./image/page_4/person.png',
		'./image/page_4/text1.png',
		'./image/page_4/text2.png',
		'./image/page_4/text3.png',
		'./image/page_4/pop1.png',
		'./image/page_4/pop2.png',
		// 第五幕需要的图
		'./image/page_5/page_bg5.jpg',
		'./image/page_5/text1.png',
		'./image/page_5/text2.png',
		'./image/page_5/text3.png',
		// 第六幕需要的图
		'./image/page_6/wave1.jpg',
		'./image/page_6/wave2.jpg',
		'./image/page_6/wave3.jpg',
		'./image/page_6/wave4.jpg',
		'./image/page_6/wave5.jpg',
		// 第七幕需要的图
		'./image/page_7/page_bg7.jpg',
		'./image/page_7/text1.png',
		'./image/page_7/text2.png',
		'./image/page_7/text3.png',
		'./image/page_7/person1.png',
		'./image/page_7/person2.png',
		'./image/page_7/person3.png',
		// 尾页需要的图片
		'./image/page_8/page_bg8.jpg',
		'./image/page_8/text3.png'
	]).done(function () {
		// 箭头
		var arrow = new Image(); arrow.src = './image/arrow.png';
		// 第一幕所需图片
		var p1 = new Image(); p1.src = './image/page_1/page_bg1.jpg',
			p1w1 = new Image(); p1w1.src = './image/page_1/bg_wave1.jpg',
			p1w2 = new Image(); p1w2.src = './image/page_1/bg_wave2.jpg',
			p1w3 = new Image(); p1w3.src = './image/page_1/bg_wave3.jpg',
			p1w4 = new Image(); p1w4.src = './image/page_1/bg_wave4.jpg',
			p1w5 = new Image(); p1w5.src = './image/page_1/bg_wave5.jpg',
			p1b1 = new Image(); p1b1.src = './image/page_1/bird_status1.png',
			p1b2 = new Image(); p1b2.src = './image/page_1/bird_status2.png',
			p1b3 = new Image(); p1b3.src = './image/page_1/bird_status3.png',
			p1t1 = new Image(); p1t1.src = './image/page_1/text1.png',
			p1t2 = new Image(); p1t2.src = './image/page_1/text2.png';
		// 第二幕所需图片
		var p2 = new Image(); p2.src = './image/page_2/page_bg2.jpg',
			p2t1 = new Image(); p2t1.src = './image/page_2/text1.png',
			p2t2 = new Image(); p2t2.src = './image/page_2/text2.png',
			p2t3 = new Image(); p2t3.src = './image/page_2/text3.png',
			p2p1 = new Image(); p2p1.src = './image/page_2/pop_status1.png',
			p2p2 = new Image(); p2p2.src = './image/page_2/pop_status2.png',
			p2p3 = new Image(); p2p3.src = './image/page_2/pop_status3.png',
			p2f1 = new Image(); p2f1.src = './image/page_2/fish_status1.png',
			p2f2 = new Image(); p2f2.src = './image/page_2/fish_status2.png',
			p2f3 = new Image(); p2f3.src = './image/page_2/fish_status3.png',
			p2s1 = new Image(); p2s1.src = './image/page_2/person1.png',
			p2s2 = new Image(); p2s2.src = './image/page_2/person2.png',
			p2s3 = new Image(); p2s3.src = './image/page_2/person3.png';
		// 第三幕所需图片
		var p3 = new Image(); p3.src = './image/page_3/page_bg3.jpg',
			p3t1 = new Image(); p3t1.src = './image/page_3/text1.png',
			p3t2 = new Image(); p3t2.src = './image/page_3/text2.png',
			p3t3 = new Image(); p3t3.src = './image/page_3/text3.png',
			p3s = new Image(); p3s.src = './image/page_3/fishing.png',
			p3p1 = new Image(); p3p1.src = './image/page_3/fish1_status1.png',
			p3p2 = new Image(); p3p2.src = './image/page_3/fish1_status2.png',
			p3p3 = new Image(); p3p3.src = './image/page_3/fish1_status3.png',
			p3f1 = new Image(); p3f1.src = './image/page_3/fish2_status1.png',
			p3f2 = new Image(); p3f2.src = './image/page_3/fish2_status2.png',
			p3f3 = new Image(); p3f3.src = './image/page_3/fish2_status3.png', 
			p3o1 = new Image(); p3o1.src = './image/page_3/popstatus1.png',
			p3o2 = new Image(); p3o2.src = './image/page_3/popstatus2.png',
			p3o3 = new Image(); p3o3.src = './image/page_3/popstatus3.png';
		// 第四幕所需图片
		var p4 = new Image(); p4.src = './image/page_4/page_bg4.jpg',
			p4s = new Image(); p4s.src = './image/page_4/person.png',
			p4t1 = new Image(); p4t1.src = './image/page_4/text1.png',
			p4t2 = new Image(); p4t2.src = './image/page_4/text2.png',
			p4t3 = new Image(); p4t3.src = './image/page_4/text3.png',
			p4o1 = new Image(); p4o1.src = './image/page_4/pop1.png',
			p4o2 = new Image(); p4o2.src = './image/page_4/pop2.png';
		// 第五幕所需图片
		var p5 = new Image(); p5.src = './image/page_5/page_bg5.jpg',
			p5t1 = new Image(); p5t1.src = './image/page_5/text1.png',
			p5t2 = new Image(); p5t2.src = './image/page_5/text2.png',
			p5t3 = new Image(); p5t3.src = './image/page_5/text3.png';
		// 第六幕所需图片
		var p6w1 = new Image(); p6w1.src = './image/page_6/wave1.jpg',
			p6w2 = new Image(); p6w2.src = './image/page_6/wave2.jpg',
			p6w3 = new Image(); p6w3.src = './image/page_6/wave3.jpg',
			p6w4 = new Image(); p6w4.src = './image/page_6/wave4.jpg',
			p6w5 = new Image(); p6w5.src = './image/page_6/wave5.jpg';
		// 第七幕所需图片
		var p7 = new Image(); p7.src = './image/page_7/page_bg7.jpg',
			p7t1 = new Image(); p7t1.src = './image/page_7/text1.png',
			p7t2 = new Image(); p7t2.src = './image/page_7/text2.png',
			p7t3 = new Image(); p7t3.src = './image/page_7/text3.png',
			p7s1 = new Image(); p7s1.src = './image/page_7/person1.png',
			p7s2 = new Image(); p7s2.src = './image/page_7/person2.png',
			p7s3 = new Image(); p7s3.src = './image/page_7/person3.png';
		// 尾页需要的图片
		var p8 = new Image(); p8.src = './image/page_8/page_bg8.jpg',
			p8t = new Image(); p8t.src = './image/page_8/text3.png';

		// 设置 canvas ------------------------------------------
		var $win = $(window),
			$body = $(document.body),
			$canvas = $('canvas'),
			canvas = $canvas[0],
			ww = $win.width(),
			wh = $win.height();
		$canvas.css({ width: ww, height: wh });
		canvas.width = ww * 2;
		canvas.height = wh * 2;

		// 去除手指触摸的默认行为 --------------------------------
		$body.on('touchmove.del', function (e) {
			// e.preventDefault();
			// e.stopPropagation();
		});

		// 全局参数 ----------------------------------------------
		var cw = canvas.width,
			ch = canvas.height,
			ctx = canvas.getContext('2d'),
			touchNum = 0,
			canTouch = false,
			tranEnd = false;

		// page1 - 动画 ------------------------------------------
		var Page1 = function () {
			this.ps = [p1,p1w1,p1w2,p1w3,p1w4,p1w5];
			this.bs = [p1b1,p1b2,p1b3];
			this.ts = [p1t1,p1t2];
			this.dur = 0;
			this.bx = 0;
			this.bst = 0;
			this.awst = 0;
			this.awy = 0;
			this.hide = false;
			return this;
		};
		Page1.prototype = {
			constructor: Page1,
			// 画背景
			drawP: function () {
				canvas.width = canvas.width;
				// 画波纹背景
				if (this.bx >= cw && this.hide) {
					if (this.dur >= 30) {this.over(); return;}
					if (this.dur >= 25) {ctx.drawImage(this.ps[5],0,0,cw,ch); return;}
					if (this.dur >= 20) {ctx.drawImage(this.ps[4],0,0,cw,ch); return;}
					if (this.dur >= 15) {ctx.drawImage(this.ps[3],0,0,cw,ch); return;}
					if (this.dur >= 5) {ctx.drawImage(this.ps[2],0,0,cw,ch); return;}
					if (this.dur >= 1) {ctx.drawImage(this.ps[1],0,0,cw,ch); return;}
				}
				// 整张 p1
				ctx.drawImage(this.ps[0],0,0,cw,ch);
				return this;
			},
			// 画海鸥、字、箭头
			drawB: function () {
				var i = Math.floor(this.bst);
				if (!this.hide) {
					if (this.bx <= cw) {ctx.drawImage(this.bs[i],this.bx,0,cw,ch);	}	
					else {ctx.drawImage(arrow,0,this.awy,cw,ch);this.bind();}			
					// 字一排一排出现
					if (this.bx > 50) {ctx.drawImage(this.ts[1],0,0,cw,ch);}
					if (this.bx > 200) {ctx.drawImage(this.ts[0],0,0,cw,ch);}
				}
				return this;			
			},
			// 切换事件绑定
			bind: function () {
				// 绑定点击箭头切换事件
				if (!canTouch && touchNum === 0) {
					canTouch = true;
					$body.on('touchstart.go2', function (e) {
						e.preventDefault();
						touchNum ++; canTouch = false; this.hide = true; $body.off('.go2');
					}.bind(this));
				}
				return this;
			},
			// update
			update: function () {
				// 海鸥状态及位置变化
				if (this.bst >= 2.9) {
					this.bst = 0;
				}
				this.bst += 0.1;
				this.bx += 4;
				// 波纹背景状态及箭头变化
				if (this.bx >= cw) {
					if (this.awst === 0) {this.awy -= 1; if (this.awy === -20) {this.awst = 1;}}	
					else {this.awy += 1; if (this.awy === 0) {this.awst = 0;}}
					if (this.hide) {this.dur ++;}
				}
				// 提示箭头
				return this;
			},
			// 结束
			over: function () {
				cancelAnimationFrame(cp1);
				// 画下一幕背景，为了切换
				canvas.width = canvas.width;
				ctx.drawImage(p2,0,0,cw,ch);
				// 开始第二幕动画
				requestAnimationFrame(startP2);
				return this;
			}
		};

		// page2 - 动画 ------------------------------------------
		var Page2 = function () {
			this.pops = [p2p1,p2p2,p2p3];
			this.fs = [p2f1,p2f2,p2f3];
			this.per = [p2s1,p2s2,p2s3];
			this.ts = [p2t1,p2t2,p2t3];
			this.p = p2;
			this.xp = 0;
			this.yp = 0;
			this.xf = 0;
			this.yf = 0;
			this.pst = 0;
			this.fst = 0;
			this.rst = 0;
			this.awst = 0;
			this.awy = 0;
			this.dur = 0;
			this.hide = false;
			return this;
		};
		Page2.prototype = {
			constructor: Page2,
			// 画第二幕背景图、字
			drawP: function () {
				canvas.width = canvas.width;
				// 结束
				if (this.dur >= 50 && this.hide) {
					this.over();
					return;
				}
				ctx.drawImage(this.p,0,0,cw,ch);
				if (this.dur >= 30) {ctx.drawImage(this.ts[2],0,0,cw,ch); return;}
				if (this.dur >= 15) {ctx.drawImage(this.ts[1],0,0,cw,ch); return;}
				if (this.dur >= 0) {ctx.drawImage(this.ts[0],0,0,cw,ch); return;}
				return this;
			},
			// 画人、小鱼、箭头
			drawB: function () {
				if (!this.hide) {
					var ri = Math.floor(this.rst),
						pi = Math.floor(this.pst),
						fi = Math.floor(this.fst);
					ctx.drawImage(this.per[ri],0,0,cw,ch);
					ctx.drawImage(this.pops[pi],this.xp,this.yp,cw,ch);
					ctx.drawImage(this.fs[fi],this.xf,this.yf,cw,ch);
					if (this.dur >= 50) {
						ctx.drawImage(arrow,0,this.awy,cw,ch);
						this.bind();
					}
				}
				return this;
			},
			// 切换事件绑定
			bind: function () {
				// 绑定点击箭头切换事件
				if (!canTouch && touchNum === 1) {
					canTouch = true;
					$body.on('touchstart.go3', function (e) {
						e.preventDefault();
						touchNum ++; canTouch = false; this.hide = true; $body.off('.go3');
					}.bind(this));
				}
				return this;
			},
			// update
			update: function () {
				// 鱼游动，人摇晃
				if (this.fst >= 2.9) {this.fst = 0;}
				if (this.pst >= 2.95) {this.pst = 0;}
				if (this.rst >= 2.95) {this.rst = 0;}
				if (this.xp <= -cw) {this.xp = cw - 200; this.yp = -100;}
				if (this.xf >= cw) {this.xf = -cw + 200; this.yf = 50;}
				this.rst += 0.025;
				this.fst += 0.05;
				this.pst += 0.025;
				this.xp -= 4;
				this.yp += 1;
				this.xf += 4;
				this.yf -= 0.5;
				// 箭头出现
				this.dur ++;
				if (this.dur >= 50) {
					if (this.awst === 0) {this.awy -= 1; if (this.awy === -20) {this.awst = 1;}}	
					else {this.awy += 1; if (this.awy === 0) {this.awst = 0;}}
				}
				return this;
			},
			// 结束
			over: function () {
				cancelAnimationFrame(cp2);
				// 画下一幕背景，为了切换
				canvas.width = canvas.width;
				ctx.drawImage(p3,0,0,cw,ch);
				// 开始第三幕动画
				requestAnimationFrame(startP3);
				return this;
			}
		};

		// page3 - 动画 ------------------------------------------
		var Page3 = function () {
			this.pops = [p3p1,p3p2,p3p3];
			this.fs = [p3f1,p3f2,p3f3];
			this.os = [p3o1,p3o2,p3o3];
			this.ts = [p3t1,p3t2,p3t3];
			this.per = p3s;
			this.p = p3;
			this.xp = 0;
			this.yp = 0;
			this.xf = 0;
			this.yf = 0;
			this.pst = 0;
			this.fst = 0;
			this.ost = 2;
			this.awst = 0;
			this.awy = 0;
			this.dur = 0;
			this.hide = false;
			return this;
		};
		Page3.prototype = {
			constructor: Page3,
			// 画第三幕背景图、字、钓鱼的人
			drawP: function () {
				canvas.width = canvas.width;
				// 结束
				if (this.dur >= 50 && this.hide) {
					this.over();
					return;
				}
				ctx.drawImage(this.p,0,0,cw,ch);
				ctx.drawImage(this.per,0,0,cw,ch);
				if (this.dur >= 30) {ctx.drawImage(this.ts[2],0,0,cw,ch); return;}
				if (this.dur >= 15) {ctx.drawImage(this.ts[1],0,0,cw,ch); return;}
				if (this.dur >= 0) {ctx.drawImage(this.ts[0],0,0,cw,ch); return;}
				return this;
			},
			// 画小鱼，泡泡，箭头
			drawB: function () {
				if (!this.hide) {
					var oi = Math.floor(this.ost),
						pi = Math.floor(this.pst),
						fi = Math.floor(this.fst);
					ctx.drawImage(this.os[oi],0,0,cw,ch);
					ctx.drawImage(this.pops[pi],this.xp,this.yp,cw,ch);
					ctx.drawImage(this.fs[fi],this.xf,this.yf,cw,ch);
					if (this.dur >= 50) {
						ctx.drawImage(arrow,0,this.awy,cw,ch);
						this.bind();
					}
				}
				return this;
			},
			// 切换事件绑定
			bind: function () {
				// 绑定点击箭头切换事件
				if (!canTouch && touchNum === 2) {
					canTouch = true;
					$body.on('touchstart.go4', function (e) {
						e.preventDefault();
						touchNum ++; canTouch = false; this.hide = true; $body.off('.go4');
					}.bind(this));
				}
				return this;
			},
			// update
			update: function () {
				// 鱼游动，泡泡闪现
				if (this.ost >= 2.95) {this.ost = 0;}
				if (this.fst >= 2.9) {this.fst = 0;}
				if (this.pst >= 2.95) {this.pst = 0;}
				if (this.xp <= -cw) {this.xp = cw - 200; this.yp = -100;}
				if (this.xf >= cw) {this.xf = -cw + 200; this.yf = 50;}
				this.ost += 0.025;
				this.fst += 0.05;
				this.pst += 0.025;
				this.xp -= 4;
				this.yp += 1;
				this.xf += 4;
				this.yf -= 0.5;
				// 箭头出现
				this.dur ++;
				if (this.dur >= 50) {
					if (this.awst === 0) {this.awy -= 1; if (this.awy === -20) {this.awst = 1;}}	
					else {this.awy += 1; if (this.awy === 0) {this.awst = 0;}}
				}
				return this;
			},
			// 结束
			over: function () {
				cancelAnimationFrame(cp3);
				// 画下一幕背景，为了切换
				canvas.width = canvas.width;
				ctx.drawImage(p4,0,0,cw,ch);
				// 开始第四幕动画
				requestAnimationFrame(startP4);
				return this;
			}
		};

		// page4 - 动画 ------------------------------------------
		var Page4 = function () {
			this.p = p4;
			this.per = p4s;
			this.ts = [p4t1,p4t2,p4t3];
			this.os = [p4o1,p4o2];
			this.awst = 0;
			this.awy = 0;
			this.dur = 0;
			this.hide = false;
			return this;
		};
		Page4.prototype = {
			constructor: Page4,
			// 画第四幕背景图、字、人
			drawP: function () {
				canvas.width = canvas.width;
				if (this.dur >= 50 && this.hide) {
					this.over();
					return;
				}
				ctx.drawImage(this.p,0,0,cw,ch);
				ctx.drawImage(this.per,0,0,cw,ch);
				if (this.dur >= 30) {ctx.drawImage(this.ts[2],0,0,cw,ch); return;}
				if (this.dur >= 15) {ctx.drawImage(this.ts[1],0,0,cw,ch); return;}
				if (this.dur >= 0) {ctx.drawImage(this.ts[0],0,0,cw,ch); return;}
				return this;
			},
			// 画泡泡
			drawB: function () {
				if (!this.hide) {
					ctx.drawImage(this.os[0],0,0,cw,ch);
					ctx.drawImage(this.os[1],0,0,cw,ch);
					if (this.dur >= 50) {
						ctx.drawImage(arrow,0,this.awy,cw,ch);
						this.bind();
					}
				}
				return this;
			},
			// 切换事件绑定
			bind: function () {
				// 绑定点击箭头切换事件
				if (!canTouch && touchNum === 3) {
					canTouch = true;
					$body.on('touchstart.go5', function (e) {
						e.preventDefault();
						touchNum ++; canTouch = false; this.hide = true; $body.off('.go5');
					}.bind(this));
				}
				return this;
			},
			// update
			update: function () {
				// 箭头出现
				this.dur ++;
				if (this.dur >= 50) {
					if (this.awst === 0) {this.awy -= 1; if (this.awy === -20) {this.awst = 1;}}	
					else {this.awy += 1; if (this.awy === 0) {this.awst = 0;}}
				}
				return this;
			},
			// 结束
			over: function () {
				cancelAnimationFrame(cp4);
				// 画下一幕背景，为了切换
				canvas.width = canvas.width;
				ctx.drawImage(p1,0,0,cw,ch);
				// 开始第五幕动画
				requestAnimationFrame(startP5);
				return this;
			}
		};

		// page5 - 动画 ------------------------------------------
		var Page5 = function () {
			this.p = p5;
			this.ts = [p4t1,p4t2,p4t3];
			this.awst = 0;
			this.awy = 0;
			this.dur = 0;
			this.hide = false;
			return this;
		};
		Page5.prototype = {
			constructor: Page5,
			// 画第四幕背景图、字、人
			drawP: function () {
				canvas.width = canvas.width;
				if (this.dur >= 50 && this.hide) {
					this.over();
					return;
				}
				ctx.drawImage(this.p,0,0,cw,ch);
				if (this.dur >= 30) {ctx.drawImage(this.ts[2],0,0,cw,ch); return;}
				if (this.dur >= 15) {ctx.drawImage(this.ts[1],0,0,cw,ch); return;}
				if (this.dur >= 0) {ctx.drawImage(this.ts[0],0,0,cw,ch); return;}
				return this;
			},
			// 
			drawB: function () {
				if (!this.hide) {
					if (this.dur >= 50) {
						ctx.drawImage(arrow,0,this.awy,cw,ch);
						this.bind();
					}
				}
				return this;
			},
			// 切换事件绑定
			bind: function () {
				// 绑定点击箭头切换事件
				if (!canTouch && touchNum === 4) {
					canTouch = true;
					$body.on('touchstart.go6', function (e) {
						e.preventDefault();
						touchNum ++; canTouch = false; this.hide = true; $body.off('.go6');
					}.bind(this));
				}
				return this;
			},
			// update
			update: function () {
				// 箭头出现
				this.dur ++;
				if (this.dur >= 50) {
					if (this.awst === 0) {this.awy -= 1; if (this.awy === -20) {this.awst = 1;}}	
					else {this.awy += 1; if (this.awy === 0) {this.awst = 0;}}
				}
				return this;
			},
			// 结束
			over: function () {
				cancelAnimationFrame(cp5);
				// 画下一幕背景，为了切换
				canvas.width = canvas.width;
				ctx.drawImage(p6w1,0,0,cw,ch);
				// 开始第六幕动画
				requestAnimationFrame(startP6);
				return this;
			}
		};

		// page6 - 动画 ------------------------------------------
		var Page6 = function () {
			this.ps = [p6w1,p6w2,p6w3,p6w4,p6w5];
			this.dur = 0;
			this.awst = 0;
			this.awy = 0;
			this.hide = false;
			return this;
		};
		Page6.prototype = {
			constructor: Page6,
			// 画第六幕背景
			drawP: function () {
				canvas.width = canvas.width;
				// 画波纹背景
				if (!this.hide) {
					if (this.dur >= 40) {ctx.drawImage(this.ps[4],0,0,cw,ch); return;}
					if (this.dur >= 30) {ctx.drawImage(this.ps[3],0,0,cw,ch); return;}
					if (this.dur >= 20) {ctx.drawImage(this.ps[2],0,0,cw,ch); return;}
					if (this.dur >= 10) { ctx.drawImage(this.ps[1],0,0,cw,ch); return;}
					if (this.dur >= 0) { ctx.drawImage(this.ps[0],0,0,cw,ch); return;}
				}
				else {
					if (this.dur >= 80) {this.over();}
				}
				return this;
			},
			// 
			drawB: function () {
				if (!this.hide) {
					if (this.dur >= 80) {
						ctx.drawImage(arrow,0,this.awy,cw,ch);
						this.bind();
					}
				}
				return this;
			},
			// 切换事件绑定
			bind: function () {
				// 绑定点击箭头切换事件
				if (!canTouch && touchNum === 5) {
					canTouch = true;
					$body.on('touchstart.go7', function (e) {
						e.preventDefault();
						touchNum ++; canTouch = false; this.hide = true; $body.off('.go7');
					}.bind(this));
				}
				return this;
			},
			// update
			update: function () {
				// 箭头出现
				this.dur ++;
				if (this.dur >= 50) {
					if (this.awst === 0) {this.awy -= 1; if (this.awy === -20) {this.awst = 1;}}	
					else {this.awy += 1; if (this.awy === 0) {this.awst = 0;}}
				}
				return this;
			},
			// 结束
			over: function () {
				cancelAnimationFrame(cp6);
				// 画下一幕背景，为了切换
				canvas.width = canvas.width;
				ctx.drawImage(p7,0,0,cw,ch);
				// 开始第七幕动画
				requestAnimationFrame(startP7);
				return this;
			}
		};

		// page7 - 动画 ------------------------------------------
		var Page7 = function () {
			this.pers = [p7s1,p7s2,p7s3];
			this.bs = [p1b1,p1b2,p1b3];
			this.ts = [p7t1,p7t2,p7t3];
			this.p = p7;
			this.dur = 0;
			this.bx = 0;
			this.bst = 0;
			this.awst = 0;
			this.awy = 0;
			this.hide = false;
			return this;
		};
		Page7.prototype = {
			constructor: Page7,
			// 画背第七幕背景、人
			drawP: function () {
				canvas.width = canvas.width;
				if (this.hide) {
					this.over();
					return;
				}
				ctx.drawImage(this.p,0,0,cw,ch);
				// 人
				if (this.dur >= 85) {ctx.drawImage(this.pers[2],0,0,cw,ch); return;}
				if (this.dur >= 50)	{ctx.drawImage(this.pers[1],0,0,cw,ch); return;}
				if (this.dur >= 15)	{ctx.drawImage(this.pers[0],0,0,cw,ch); return;}
				return this;
			},
			// 画海鸥、字、箭头
			drawB: function () {
				var i = Math.floor(this.bst);
				if (!this.hide) {
					if (this.bx <= cw) {ctx.drawImage(this.bs[i],this.bx,0,cw,ch);}	
					else {ctx.drawImage(arrow,0,this.awy,cw,ch);this.bind();}			
					// 字
					if (this.dur >= 10) {ctx.drawImage(this.ts[2],0,0,cw,ch); return;}
					if (this.dur >= 5) {ctx.drawImage(this.ts[1],0,0,cw,ch); return;}
					if (this.dur >= 0) {ctx.drawImage(this.ts[0],0,0,cw,ch); return;}
				}
				return this;			
			},
			// 切换事件绑定
			bind: function () {
				// 绑定点击箭头切换事件
				if (!canTouch && touchNum === 6) {
					canTouch = true;
					$body.on('touchstart.go8', function (e) {
						e.preventDefault();
						touchNum ++; canTouch = false; this.hide = true; $body.off('.go8');
					}.bind(this));
				}
				return this;
			},
			// update
			update: function () {
				this.dur ++
				// 海鸥状态及位置变化
				if (this.bst >= 2.9) {
					this.bst = 0;
				}
				this.bst += 0.1;
				this.bx += 4;
				// 箭头
				if (this.bx >= cw) {
					if (this.awst === 0) {this.awy -= 1; if (this.awy === -20) {this.awst = 1;}}	
					else {this.awy += 1; if (this.awy === 0) {this.awst = 0;}}
				}
				return this;
			},
			// 结束
			over: function () {
				cancelAnimationFrame(cp7);
				// 画下一幕背景，为了切换
				canvas.width = canvas.width;
				// 显示尾页
				showLastPage();
				return this;
			}
		};

		// page7 - 尾页 ------------------------------------------
		function showLastPage() {
			$('img').css('display', 'block');
			$('a').css('display', 'block');
			ctx.drawImage(p8,0,0,cw,ch);
			ctx.drawImage(p8t,0,0,cw,ch);
		}

		// 执行动画 ----------------------------------------------
		var cp1 = cp2 = cp3 = cp4 = cp5 = cp6 = cp7 = undefined;
		var page1 = page2 = page3 = page4 = page5 = page6 = page7 = null;
		var startP1 = startP2 = startP3 = startP4 = startP5 = startP6 = startP7 = null;

		startTotal();

		function startTotal() {
			page1 = new Page1();
			page2 = new Page2();
			page3 = new Page3();
			page4 = new Page4();
			page5 = new Page5();
			page6 = new Page6();
			page7 = new Page7();
			startP1 = function () {
				cp1 = requestAnimationFrame(startP1);
				page1.drawP();
				page1.drawB();	
				page1.update();
			};
			startP2 = function () {
				cp2 = requestAnimationFrame(startP2);
				page2.drawP();
				page2.drawB();	
				page2.update();
			}
			startP3 = function () {
				cp3 = requestAnimationFrame(startP3);
				page3.drawP();
				page3.drawB();	
				page3.update();
			}
			startP4 = function () {
				cp4 = requestAnimationFrame(startP4);
				page4.drawP();
				page4.drawB();	
				page4.update();
			}
			startP5 = function () {
				cp5 = requestAnimationFrame(startP5);
				page5.drawP();
				page5.drawB();	
				page5.update();
			}
			startP6 = function () {
				cp6 = requestAnimationFrame(startP6);
				page6.drawP();
				page6.drawB();	
				page6.update();
			}
			startP7 = function () {
				cp7 = requestAnimationFrame(startP7);
				page7.drawP();
				page7.drawB();	
				page7.update();
			}
			requestAnimationFrame(startP1);
		}
	})
	.fail(function () {
		console.log('preload error');
	});
});
</script>
</body>
</html>